<template>
  <div class="app_wrap">
    <Menu></Menu>
    <div class="app_main_box">
      <div class="app_date_time_box">
        <DateTime></DateTime>
      </div>
      <div class="app_search_box">
        <Search></Search>
      </div>
      <div class="app_main_content_box">
        <MainContent id="CONTENT_SCROLL_BOX"></MainContent>
      </div>
    </div>
  </div>
</template>

<script>
import { defineComponent, ref, onMounted } from "vue";
import "./App.scss";
export default defineComponent({
  name: "App",
});
</script>
<script setup>
import Menu from "@/components/menu/index.vue";
import DateTime from "@/components/dateTime/index.vue";
import Search from "@/components/search/index.vue";
import MainContent from "@/components/mainContent/index.vue";
import _ from "lodash";
import { useContentStore } from "@/store";

const contentStore = useContentStore();

// 向上滚动处理函数
const scrollToTop = () => {
  console.log("向上");

  contentStore.currentScrollDirection = "top";
  if (contentStore.currentCategory == 1) {
    contentStore.currentCategory = contentStore.categorys.length;
  } else {
    contentStore.currentCategory -= 1;
  }
  contentStore.setModules();
  // if (currentCategoryIndex.value == 0) {
  //   currentCategoryIndex.value = categoryList.value.length - 1;
  // } else {
  //   currentCategoryIndex.value -= 1;
  // }
};

// 向下滚动处理函数
const scrollToBottom = () => {
  console.log("向下");
  contentStore.currentScrollDirection = "bottom";
  if (contentStore.currentCategory == contentStore.categorys.length) {
    contentStore.currentCategory = 1;
  } else {
    contentStore.currentCategory += 1;
  }
  contentStore.setModules();
  // if (currentCategoryIndex.value == categoryList.value.length - 1) {
  //   currentCategoryIndex.value = 0;
  // } else {
  //   currentCategoryIndex.value += 1;
  // }
};

// 滚轮监听函数
const idlerWheelMonitor = () => {
  // 方式一：使用addEventListener函数监听鼠标滚轮事件
  document.addEventListener("mousewheel", debouncedSearch);
};

// 节流处理函数
const debouncedSearch = _.throttle(
  function (event) {
    // 滚动盒子元素
    const scrollBoxEl = document.getElementById("CONTENT_SCROLL_BOX");

    // Chrome、Safari、IE的mousewheel事件，滚轮向上滚动时event.wheelDelta值为120的倍数，向下滚动时为-120的倍数
    // Firefox的mousewheel事件，滚轮向上滚动时event.detail值为-3的倍数，向下滚动时为3的倍数
    var delta = Math.max(-1, Math.min(1, event.wheelDelta || -event.detail));

    // 获取鼠标相对于视口的坐标
    const mouseX = event.clientX;
    const mouseY = event.clientY;

    // 获取目标元素的边界信息
    const rect = scrollBoxEl.getBoundingClientRect();

    // 获取目标元素相对于视口的左上角坐标
    const elementLeft = rect.left;
    const elementTop = rect.top;

    // 获取目标元素的宽度和高度
    const elementWidth = rect.width;
    const elementHeight = rect.height;

    // 判断鼠标是否在目标元素内
    if (
      mouseX >= elementLeft &&
      mouseX <= elementLeft + elementWidth &&
      mouseY >= elementTop &&
      mouseY <= elementTop + elementHeight
    ) {
      console.log("鼠标在元素上");
    } else {
      console.log("鼠标不在元素上");
      // 在此处理滚轮事件
      if (delta > 0) {
        // currentScrollDirection.value = "top";
        // console.log("向上翻页");
        scrollToTop();
      } else if (delta < 0) {
        // currentScrollDirection.value = "bottom";
        scrollToBottom();
        // console.log("向下翻页");
      }
    }
  },
  200,
  {
    leading: true,
    trailing: false,
  }
);
onMounted(() => {
  idlerWheelMonitor();
});
</script>

<style lang="scss" scoped></style>
